<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/vue.js"></script>
</head>

<body>
<h2>示例：监听子组件事件</h2>
<p>
    父子组件的关系可以总结为 prop 向下传递，事件$emit向上传递
</p>
<div id="blog-posts-events-demo">
    <h3>示例1</h3>
    <p>
        模板中子组件v-on:click="$emit('enlarge-text')"
        对应v-on:enlarge-text="postFontSize += 0.1"的事件名（enlarge-text）
    </p>
    <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post
                v-for="post in posts"
                v-bind:key="post.id"
                v-bind:post="post"
                v-on:enlarge-text="postFontSize += 0.1"
                v-on:ensmall-text="postFontSize -= 0.1"
        ></blog-post>
    </div>

    <h3>示例2</h3>
    <p>
        当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值
    </p>
    <div :style="{ fontSize: postFontSize2 + 'em' }">
        <blog-post2
                v-for="post in posts"
                v-bind:key="post.id"
                v-bind:post="post"
                v-on:enlarge-text="postFontSize2 += $event"
                v-on:ensmall-text="postFontSize2 -= $event"
        ></blog-post2>
    </div>

    <h3>示例3</h3>
    <p>
        当在父级组件监听这个事件的时候，如果这个事件处理函数是一个方法
    </p>
    <div :style="{ fontSize: postFontSize3 + 'em' }">
        <blog-post3
                v-for="post in posts"
                v-bind:key="post.id"
                v-bind:post="post"
                v-on:enlarge-text="onEnlargeText"
                v-on:ensmall-text="onEnsmallText"
        ></blog-post3>
    </div>
</div>

<script>
    Vue.component('blog-post', {
        props: ['post'],
        template: `
          <div class="blog-post">
          <h4>{{ post.title }}</h4>
          <button v-on:click="$emit('enlarge-text')">
            Enlarge text
          </button>
          <button v-on:click="$emit('ensmall-text')">
            ensmall text
          </button>
          <div v-html="post.content"></div>
          </div>
        `
    })

    Vue.component('blog-post2', {
        props: ['post'],
        template: `
          <div class="blog-post">
          <h4>{{ post.title }}</h4>
          <button v-on:click="$emit('enlarge-text', 0.1)">
            Enlarge text
          </button>
          <button v-on:click="$emit('ensmall-text', 0.1)">
            ensmall text
          </button>
          <div v-html="post.content"></div>
          </div>
        `
    })

    Vue.component('blog-post3', {
        props: ['post'],
        template: `
          <div class="blog-post">
          <h4>{{ post.title }}</h4>
          <button v-on:click="$emit('enlarge-text', 0.1)">
            Enlarge text
          </button>
          <button v-on:click="$emit('ensmall-text', 0.1)">
            ensmall text
          </button>
          <div v-html="post.content"></div>
          </div>
        `
    })

    new Vue({
        el: '#blog-posts-events-demo',
        data: {
            posts: [
                {id: 1, title: 'My journey with Vue'},
                {id: 2, title: 'Blogging with Vue'}
            ],
            postFontSize: 1,
            postFontSize2: 1,
            postFontSize3: 1,
        },
        methods: {
            onEnlargeText: function (enlargeAmount) {
                this.postFontSize3 += enlargeAmount
            },
            onEnsmallText: function (enlargeAmount) {
                this.postFontSize3 -= enlargeAmount
            }
        }
    })

</script>
</body>
</html>
